<template>
  <div class="blog-page">
    <Layout>
      <template #main>
        <!-- <div class="main"> -->
          <BlogList></BlogList>
        <!-- </div> -->
      </template>

      <template #right>
        <div class="right">
          <BlogCate></BlogCate>
        </div>
      </template>
    </Layout>
  </div>
</template>

<script>
import BlogCate from './components/BlogCate.vue';
import BlogList from './components/BlogList.vue';
import Layout from '@/components/Layout'
export default {
  components: {
    BlogCate,
    BlogList,
    Layout
  },
  methods: {
  },
  created() {
  },
  data() {
    return {
      list: [
        {name: 'Herta', isSelected: true, children: [
          { name: 'Herta', isSelected: false }
        ]},
        {name: 'Asida', isSelected: false},
        {name: 'Kafka', isSelected: false},
        {name: 'Vector', isSelected: false},
        {name: 'None', isSelected: false}
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.blog-page {
  width: 100%;
  height: 100%;

  .right {
    width: 18vw;
    height: 100%;
  }
}
</style>